<template>
	<view>
		<uni-nav-bar left-text="通讯录" backgroundColor="#eee" class="nav">
		</uni-nav-bar>
		<view class="menu-wrap" @click="jump('./newFriend')">
			  <text class="iconfont icontianjiapengyoutubiao icon"></text>
			  <text class="text">新的好友</text>
			  <uni-badge :text="sysmsgUnread.applyFriend" type="error"></uni-badge>
		</view>
	
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(key, index) in indexKey" :key="index">
				<u-index-anchor :index="key" />
				<view v-for="item in friendObj[key]" @click="jump(item.link)">
					<view class="wrap">
						<u-avatar :src="item.avatar" class="ava"></u-avatar>
						{{item.alias}}
					</view>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
  import { mapState } from 'vuex'
  
	export default {
		data() {
			return {
				scrollTop: 0,
				friendObj: {}
			}
		},
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    computed: {
      ...mapState({
        indexKey: function (state) {
          const obj = {}
          const keys = []
          state.app.userInfos.map(item => {
            item.alias = item.nick || item.account;									// 设置显示的昵称
            item.link = `/pages/index/chat?id=p2p-${item.account}`;					// 设置聊天界面跳转的链接
            item.letter = pinyinUtil.getFirstLetter(item.alias)[0].toUpperCase(); 	// 获取拼音首字母
            
            if (!obj[item.letter]) {
              obj[item.letter] = []
            }
            obj[item.letter].push(item);
            
            if (keys.indexOf(item.letter) === -1) {
              keys.push(item.letter)
            }
          })
          keys.sort()
          this.friendObj = obj;      
          return keys;
        },
        userInfos: (state) => {
          return state.contact.userInfos
        },
        sysmsgUnread: (state) => {
          return state.app.sysmsgUnread
        }
      })
    },
	methods: {
		jump (link) {
			uni.navigateTo({
			  url: link
			})
		  }
		}
	}
</script>

<style scoped lang="scss">
  .wrap {
    padding: 10rpx 20rpx;
  }
  .ava {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }
  .icon {
    font-size: 80rpx;
    color: #F29100;
    border-radius: 10rpx;
  }
  .menu-wrap {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
  }
  .text {
    margin-left: 20rpx;
    width: 70vw;
  }
</style>
